<nz-layout class="layout">
  <nz-sider nzCollapsible [nzTrigger]="null">
    <div class="logo"><img src="https://img.alicdn.com/imgextra/i2/O1CN0127yiTv1sNNgzlotua_!!6000000005754-2-tps-100-100.png" alt=""><span>RxJS</span></div>
    <ul class="live type2">
      <li [routerLink]="['/index/lessons-day1']">初识RxJS</li>
      <li [routerLink]="['/index/lessons-day2']">RxJS-调用接口</li>
      <li [routerLink]="['/index/lessons-day3']">RxJS-清理订阅</li>
      <li [routerLink]="['/index/lessons-day4']">RxJS-操作符（operators）</li>
      <li [routerLink]="['/index/lessons-day5']">RxJS-AsyncSubject</li>
      <li [routerLink]="['/index/lessons-day6']">RxJS-Subject</li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header *ngIf='!isIndex'>
      <button nz-button nzType="default" nzShape="circle" (click)="goBack()">
        <i nz-icon nzType="left" nzTheme="outline"></i>
      </button>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <ng-container [ngTemplateOutlet]="open" *ngIf='isIndex'></ng-container>
        <!-- 渲染视图 -->
        <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer>一起学习🤺</nz-footer>
  </nz-layout>
</nz-layout>


<ng-template #open>
  <app-index-open></app-index-open>
</ng-template>
